<template>
<div>
  <div class="hearder">
     <div class="search">
        <el-input placeholder="请输入内容" class="input-with-select" v-model="searchContent">
        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
      </el-input>
     </div>
    <div class="add">
      <button @click="openAdd">新增</button>
    </div>
  </div>
  <div class="content">
    <el-table
        :data="dataList"
        style="width: 100%;">
      <el-table-column
          prop="id"
          header-align="center"
          align="center"
          label="id">
      </el-table-column>
      <el-table-column
          prop="title"
          header-align="center"
          align="center"
          label="标题"
          :show-overflow-tooltip='text'>
      </el-table-column>
      <el-table-column
          prop="type"
          header-align="center"
          align="center"
          label="类型">
      </el-table-column>
      <el-table-column
          prop="brand"
          header-align="center"
          align="center"
          label="品牌">
      </el-table-column>
      <el-table-column
          prop="ramList"
          header-align="center"
          align="center"
          label="版本"
          :show-overflow-tooltip='text'>
      </el-table-column>
      <el-table-column
          prop="colorList"
          header-align="center"
          align="center"
          label="颜色"
          :show-overflow-tooltip='text'>
      </el-table-column>
      <el-table-column
          prop="price"
          header-align="center"
          align="center"
          label="价格">
      </el-table-column>
      <el-table-column
          prop="wareTotal"
          header-align="center"
          align="center"
          label="库存总量">
      </el-table-column>
      <el-table-column
          prop="status"
          header-align="center"
          align="center"
          label="状态">
        　<template slot-scope="scope">
            <el-tag type="success" style="line-height: 25px" v-if="scope.row.status == 0">有效</el-tag>
            <el-tag type="danger" style="line-height: 25px" v-if="scope.row.status == 1">失效</el-tag>
            <el-tag type="warning" style="line-height: 25px" v-if="scope.row.status == 2">待审核</el-tag>
        　</template>
      </el-table-column>
      <el-table-column
          prop="paramMap"
          header-align="center"
          align="center"
          label="详细参数"
          :show-overflow-tooltip='text'>
      </el-table-column>
      <el-table-column
          prop="image"
          header-align="center"
          align="center"
          label="图片">
        <template slot-scope="scope">
          　　　<img :src="scope.row.image" width="40" height="40" @mousemove="imgDialog(scope.row.image)" @mouseout="imgOut"/>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="250"
          label="操作">
        <template slot-scope="scope">
          <el-button size="small"  type="primary" @click="getSku(scope)">库存</el-button>
          <el-button size="small" type="success"@click="update(scope)">修改</el-button>
          <el-button size="small" type="danger" v-if="scope.row.status == 0" @click="invalid(scope)">失效商品</el-button>
          <el-button size="small" type="warning"v-if="scope.row.status == 1" @click="reUpShop(scope)">重新上架</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="imgflolt" v-if="this.imgDialog!=null"  width="20%" height="22%" style="border-radius: 4px;">
    <img :src='imgSrc'>
  </div>
<!--  组件-->
  <page-util :total="total" @pageNumStatus="pageNumStatus" @pageSizeStatus="pageSizeStatus"></page-util>
  <show-sku :sku-visible="skuStatus" :sku-data="skuList" @closeSku="closeSku"></show-sku>
  <loading></loading>
  <shop-add-update
      :shop-add-status="shopAddUpdateStatus"
      :spuList="spuList"
      @colse="closeUpdateAdd"
      @update="updateSup"
      :do-type="doType"
      :show-param="showParam"
      @add="add"
  ></shop-add-update>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》'
import pageUtil from "../common/pageUtil";
import showSku from "./show-sku";
import loading from "@/views/common/loading";
import shopAddUpdate from './shop-add-update';
import ElementUI from "_element-ui@2.15.6@element-ui";
import store from '@/store/index'

export default {
//import引入的组件需要注入到对象中才能使用
components: {
  pageUtil,
  showSku,
  loading,
  shopAddUpdate
},
props: {},
data() {
//这里存放数据
return {
  dataList:[],
  pageSize: 7,
  pageNum:1,
  total:0,
  text:true,
  imgSrc:null,
  pageType:null,
  searchContent:null,
  skuStatus: false,  //库存状态
  skuList: [],  //查看库存，父组件发送数据给子组件,
  shopAddUpdateStatus:false,
  spuList:[],
  doType: "spu",   //操作类型，又shop-add-update识别
  showParam: []
};
},
//计算属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  //主体获取
  page() {
    this.pageType = "spu"
    this.$http({
      url: 'product/phonespu/page',
      method: 'post',
      data: this.$http.adornData({
        pageSize:this.pageSize,
        pageNum:this.pageNum
      })
    }).then((res)=>{

      // console.log(res.data.data)
      this.dataList = res.data.data.list
      //分页数据，总条数
      this.total = res.data.data.totalCount
    })
  },
  //模糊查询
  search(){
    this.pageType = "search"
    this.$http({
      url: 'product/phonespu/search',
      method: 'post',
      data:this.$http.adornData({
        pageSize:this.pageSize,
        pageNum:this.pageNum,
        like: this.searchContent
      })
    }).then((res)=>{
      this.dataList = res.data.data.list
      //分页数据，总条数
      this.total = res.data.data.totalCount

    })
  },
  //添加
  add(form){
    if (form!=null){
      this.$http({
        url: 'product/phonespu/add',
        method: 'post',
        data: this.$http.adornData({
          title: form.title,
          type: form.type,
          brand: form.brand,
          price: form.price,
          image: form.image,
          paramMap: form.paramMap,
          color:form.color,
          ram:form.size,
          num:form.num,
          roleId: sessionStorage.getItem("roleId")
        })
      })
      this.closeUpdateAdd()
      this.page()
    }
  },
  //图片显示与关闭
  imgDialog(img){
    this.imgSrc = img
  },
  imgOut(){
    this.imgSrc = null
  },
  //第几页
  pageNumStatus(pageNum){

    this.pageNum = pageNum
    if (this.pageType == "spu"){
      this.page()
    }
    if (this.pageType == "search"){
      this.search()
    }

  },
  //一页多少条数据
  pageSizeStatus(pageSize){
    this.pageSize = pageSize
    if (this.pageType == "spu"){
      this.page()
    }
    if (this.pageType == "search"){
      this.search()
    }
  },
  //查看库存功能
  getSku(row){
    this.$http({
      url: 'product/phonesku/sku',
      method: 'post',
      data:this.$http.adornData({
       spuId:row.row.id
      })
    }).then((res)=>{
     this.skuList = res.data.data
      this.skuStatus = true
    })
  },

  //失效商品
  invalid(row){

  },
  //修改商品
  update(row){
    this.$http({
      url: 'product/phonespu/list',
      method: 'post',
      data: this.$http.adornData({
        id: row.row.id
      })
    }).then((res)=>{
      this.spuList = res.data.list
      this.showParam = res.data.list[0].listMap
    })
    this.doType = "update"
    this.shopAddUpdateStatus = true
  },
  //确定修改
  updateSup(form,img,id){
   this.$http({
     url: 'product/phonespu/update',
     method: 'post',
     data: this.$http.adornData({
       id: id,
       title: form.title,
       type: form.type,
       brand: form.brand,
       price: form.price,
       image: img
     })
   })
    this.shopAddUpdateStatus = false
    this.page()
    // store.commit("uploaldFile",null)
  },
  //重新上架
  reUpShop(){

  },
  closeSku(){
    this.skuStatus=false
  },
  closeUpdateAdd(){
    this.shopAddUpdateStatus = false
  },
  //打开添加
  openAdd(){
    this.doType = "add"
    this.shopAddUpdateStatus = true
  }




},
//声明周期 - 创建完成（可以访问当前this实例）
created() {
  this.page()
},
//声明周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
*{
  line-height: 0;
}
.hearder{
  height: 40px;
}
.search{
  float: left;
  width: 400px;
}
.add{
  float: left;
  margin-left: 20px;
}
.add button{
  height: 40px;
  width: 70px;
  border-radius: 3px;
  color: #ffffff;
  border: none;
  background-color: #08AEEA;
  background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
}
.add button:hover{
  background-color: #FBAB7E;
  background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);

}
.imgflolt{
  width: 400px;
  height: 400px;
  /*background-color: red;*/
  border: 0;
  position: absolute;
  top: 25%;
  left: 45%;
  overflow: hidden;

}
.content{
  margin-top: 20px;
}
</style>
